<script setup lang="ts">
import { ref, onDeactivated, onActivated } from 'vue'
import { useRoute } from 'vue-router'
import { chatList } from '../constants'
import { scrollToBottom } from '@/utils'
import data from './conversation.json'

const currentMessageIndex = ref(0)
const chatTitle = ref('')
const displayedMessages = ref<{ content: string; role: string }[]>()
const route = useRoute()

// 获取下一条消息
function nextMessage() {
  currentMessageIndex.value++
  scrollToBottom('.chat-container')
}

// 获取本次闲聊的标题
function getChatTitle(type: string) {
  for (const chatItem of chatList) {
    if (chatItem.type === type) {
      chatTitle.value = chatItem.title
      return
    }
  }
}

// 每次页面活跃的时候执行
onActivated(() => {
  const { type } = route.query
  // 1. 这里可以拿到本次闲聊的类型
  // 直接用type到字典里里面取数据
  // 比如：数据为data，通过type拿对话数据
  displayedMessages.value = (data as any)[type as string] || []
  // 2. 动态更改title
  getChatTitle(type as string)
})

// 页面不活跃的时候执行
onDeactivated(() => {
  currentMessageIndex.value = 0
})
</script>

<template>
  <div class="introduce">
    <div class="main max-w-[85%] ml-auto mr-auto pt-10">
      <!-- 标题 -->
      <div
        class="character w-64 max-w-[90%] text-[#f3f4d9] h-16 flex items-center justify-center m-auto relative"
      >
        <div class="avatar w-12 h-12 absolute left-2"></div>
        <p class="text-2xl tracking-[0.5em] pl-10">伶伦</p>
      </div>
      <!-- 内容框 -->
      <div
        class="section pt-24 md:pt-32 h-[70vh] pl-[16%] pr-[12%] relative -mt-3"
        @click="nextMessage"
      >
        <div
          class="clear w-48 max-w-[70%] h-10 absolute bottom-3 left-[50%] translate-x-[-50%]"
          @click="$router.replace('/introduce')"
        >
          <p class="text-[#f3f4d9] text-center text-lg tracking-[0.4em] pt-1.5">结束对话</p>
        </div>
        <div class="title w-52 max-w-[90%] m-auto h-10 mb-4">
          <!-- 闲聊标题：如关于伶伦/关于黄帝... -->
          <p class="text-center pt-2 text-primary">{{ chatTitle }}</p>
        </div>
        <div
          class="chat-container h-[70%] pl-1 pr-4 overflow-scroll text-[#f3f4d9] text-xs"
          ref="chatContainer"
        >
          <div class="flex flex-col" v-for="(message, index) in displayedMessages" :key="index">
            <div class="info select-none" v-if="currentMessageIndex >= index">
              <div
                :class="[
                  'w-8 h-8',
                  message.role == 'linglun' ? 'head-photo-linglun' : 'head-photo-visitor'
                ]"
              ></div>
              <div :class="[message.role == 'linglun' ? 'message-linglun' : 'message-visitor']">
                {{ message.content }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.head-photo-linglun {
  float: left;
}

.head-photo-visitor {
  float: right;
}

.message-linglun {
  font-size: 12px;
  /* width: 182px; */
  margin-left: 42px;
  margin-bottom: 15px;
  padding: 8px;
  border-radius: 8px;
  background: #828f7b;
  position: relative;
}

.message-linglun::before {
  content: '';
  border-right: 6px solid #828f7b;
  border-left: 0px solid #828f7b;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  position: absolute;
  left: -5px;
}

.message-visitor {
  font-size: 12px;
  /* width: 185px; */
  margin-right: 42px;
  margin-bottom: 15px;
  padding: 8px;
  border-radius: 8px;
  background: #828f7b;
  position: relative;
}

.message-visitor::before {
  content: '';
  border-right: 0px solid #828f7b;
  border-left: 6px solid #828f7b;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  position: absolute;
  right: -5px;
}

.info {
  animation: fadeIn 1s ease-out forwards;
  opacity: 0;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.title {
  background: url('../../../assets/img/input.png');
}

.head-photo-linglun {
  background: url('../../../assets/img/头像2.png');
}

.head-photo-visitor {
  background: url('../../../assets/img/radius.png');
}

.avatar {
  background: url('../../../assets/img/头像2.png');
}

.character {
  background: url('../../../assets/img/title.png');
}

.introduce-btn {
  background: url('../../../assets/img/tooltip.png');
}

.section {
  background: url('../../../assets/img/dialog.png');
}

.tab {
  background: url('../../assets/img/input.png');
}

.clear {
  background: url('../../../assets/img/button.png');
}

.tab,
.introduce-btn,
.character,
.avatar,
.clear,
.head-photo-linglun,
.head-photo-visitor,
.title,
.section {
  background-size: 100% 100%;
}
</style>
